'use client';

import { useState, useEffect } from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import {
  ArrowRight,
  Play,
  Github,
  Zap,
  Shield,
  Layers,
  TrendingUp,
} from 'lucide-react';
import { PERFORMANCE_METRICS } from '@/constants';
import { formatPerformanceMetric, formatLatency } from '@/lib/utils';

/**
 * 首页Hero Section组件
 * 展示CActor的核心价值主张和关键指标
 */
export function HeroSection() {
  const [currentMetric, setCurrentMetric] = useState(0);
  const [animatedThroughput, setAnimatedThroughput] = useState(0);

  // 性能指标轮播 - 增强版本
  const metrics = [
    {
      icon: Zap,
      label: '消息吞吐量',
      value: formatPerformanceMetric(PERFORMANCE_METRICS.THROUGHPUT, 'msg/s'),
      color: 'text-blue-600',
      highlight: '20M+',
      description: '每秒处理超过2000万条消息',
    },
    {
      icon: TrendingUp,
      label: 'Ask性能',
      value: formatPerformanceMetric(
        PERFORMANCE_METRICS.ASK_PERFORMANCE,
        'req/s'
      ),
      color: 'text-purple-600',
      highlight: '649K',
      description: '同步请求响应性能',
    },
    {
      icon: Shield,
      label: 'P99延迟',
      value: formatLatency(PERFORMANCE_METRICS.ASK_LATENCY),
      color: 'text-green-600',
      highlight: '< 1ms',
      description: '99%请求延迟小于1毫秒',
    },
    {
      icon: Layers,
      label: 'Actor集群',
      value: formatPerformanceMetric(
        PERFORMANCE_METRICS.ACTOR_CLUSTER_SIZE,
        'Actors'
      ),
      color: 'text-orange-600',
      highlight: '100万+',
      description: '支持百万级Actor集群',
    },
  ];

  // 动画效果
  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentMetric(prev => (prev + 1) % metrics.length);
    }, 3000);

    return () => clearInterval(interval);
  }, [metrics.length]);

  // 数字动画效果
  useEffect(() => {
    const duration = 2000;
    const steps = 60;
    const increment = PERFORMANCE_METRICS.THROUGHPUT / steps;
    let current = 0;
    let step = 0;

    const timer = setInterval(() => {
      current += increment;
      step++;
      setAnimatedThroughput(Math.floor(current));

      if (step >= steps) {
        clearInterval(timer);
        setAnimatedThroughput(PERFORMANCE_METRICS.THROUGHPUT);
      }
    }, duration / steps);

    return () => clearInterval(timer);
  }, []);

  return (
    <section className="relative overflow-hidden bg-gradient-to-br from-background via-background to-muted/20">
      {/* 背景装饰 */}
      <div className="absolute inset-0 bg-grid-pattern opacity-5" />
      <div className="absolute top-0 right-0 w-1/2 h-1/2 bg-gradient-to-bl from-blue-500/10 via-purple-500/5 to-transparent rounded-full blur-3xl" />
      <div className="absolute bottom-0 left-0 w-1/2 h-1/2 bg-gradient-to-tr from-cyan-500/10 via-green-500/5 to-transparent rounded-full blur-3xl" />

      <div className="container relative">
        <div className="flex flex-col items-center justify-center min-h-[80vh] py-16 text-center">
          {/* 版本徽章 */}
          <div className="mb-8 fade-in">
            <Badge variant="outline" className="px-4 py-2 text-sm font-medium">
              <span className="mr-2">🚀</span>
              CActor v2.0 现已发布
              <ArrowRight className="ml-2 h-3 w-3" />
            </Badge>
          </div>

          {/* 主标题 */}
          <div className="mb-8 space-y-4 slide-in-up">
            <h1 className="text-4xl font-bold tracking-tight sm:text-6xl lg:text-7xl">
              高性能
              <span className="gradient-text block">Actor系统</span>
            </h1>
            <p className="mx-auto max-w-3xl text-lg text-muted-foreground sm:text-xl lg:text-2xl">
              基于仓颉语言实现的企业级Actor框架，采用7层模块化架构，
              <br className="hidden sm:block" />
              为金融行业提供超低延迟、高吞吐量的解决方案
            </p>
          </div>

          {/* 核心指标展示 - 增强版本 */}
          <div className="mb-12 grid grid-cols-2 gap-6 sm:grid-cols-4 lg:gap-8 scale-in">
            {metrics.map((metric, index) => {
              const Icon = metric.icon;
              const isActive = index === currentMetric;

              return (
                <div
                  key={metric.label}
                  className={`group relative rounded-xl border bg-card/50 backdrop-blur-sm p-6 transition-all duration-500 hover:shadow-lg ${
                    isActive
                      ? 'border-primary/50 bg-primary/5 scale-105 shadow-xl'
                      : 'border-border hover:border-primary/30 hover:bg-card/80'
                  }`}
                >
                  <div className="flex flex-col items-center space-y-3">
                    {/* 图标和高亮标签 */}
                    <div className="relative">
                      <Icon
                        className={`h-8 w-8 ${metric.color} transition-all duration-300 ${
                          isActive ? 'scale-110' : 'group-hover:scale-105'
                        }`}
                      />
                      {isActive && (
                        <div className="absolute -top-1 -right-1 h-3 w-3 bg-primary rounded-full animate-ping" />
                      )}
                    </div>

                    {/* 高亮数值 */}
                    <div className="text-center">
                      <div
                        className={`text-3xl font-bold ${metric.color} metric-counter`}
                      >
                        {metric.highlight}
                      </div>
                      <div className="text-sm text-muted-foreground mt-1">
                        {index === 0
                          ? formatPerformanceMetric(animatedThroughput, 'msg/s')
                          : metric.value}
                      </div>
                    </div>

                    {/* 标签和描述 */}
                    <div className="text-center">
                      <div className="text-sm font-medium text-foreground">
                        {metric.label}
                      </div>
                      <div className="text-xs text-muted-foreground mt-1 max-w-[120px]">
                        {metric.description}
                      </div>
                    </div>
                  </div>

                  {/* 活跃状态背景 */}
                  {isActive && (
                    <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-blue-500/10 via-purple-500/10 to-cyan-500/10 animate-pulse" />
                  )}

                  {/* 悬停效果 */}
                  <div className="absolute inset-0 rounded-xl bg-gradient-to-r from-transparent via-primary/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
                </div>
              );
            })}
          </div>

          {/* 操作按钮 */}
          <div className="flex flex-col gap-4 sm:flex-row sm:gap-6 fade-in">
            <Button size="lg" className="button-hover" asChild>
              <Link href="/docs/getting-started">
                <Play className="mr-2 h-4 w-4" />
                快速开始
              </Link>
            </Button>

            <Button
              size="lg"
              variant="outline"
              className="button-hover"
              asChild
            >
              <Link href="https://github.com/cactor-framework" target="_blank">
                <Github className="mr-2 h-4 w-4" />
                查看源码
              </Link>
            </Button>
          </div>

          {/* 信任指标 */}
          <div className="mt-16 fade-in">
            <p className="mb-6 text-sm text-muted-foreground">
              已被全球领先的金融机构信赖
            </p>
            <div className="flex flex-wrap items-center justify-center gap-8 opacity-60">
              {/* 这里可以放置客户logo */}
              <div className="flex items-center space-x-2 text-sm font-medium">
                <div className="h-8 w-8 rounded bg-gradient-to-br from-blue-600 to-purple-600" />
                <span>某大型银行</span>
              </div>
              <div className="flex items-center space-x-2 text-sm font-medium">
                <div className="h-8 w-8 rounded bg-gradient-to-br from-green-600 to-cyan-600" />
                <span>某证券公司</span>
              </div>
              <div className="flex items-center space-x-2 text-sm font-medium">
                <div className="h-8 w-8 rounded bg-gradient-to-br from-orange-600 to-red-600" />
                <span>某支付平台</span>
              </div>
              <div className="flex items-center space-x-2 text-sm font-medium">
                <div className="h-8 w-8 rounded bg-gradient-to-br from-purple-600 to-pink-600" />
                <span>某金融科技</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      {/* 滚动指示器 */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
        <div className="flex flex-col items-center space-y-2 text-muted-foreground">
          <div className="text-xs">了解更多</div>
          <div className="h-6 w-px bg-gradient-to-b from-muted-foreground to-transparent" />
        </div>
      </div>
    </section>
  );
}

// 添加网格背景样式到全局
if (typeof document !== 'undefined') {
  const style = document.createElement('style');
  style.textContent = `
    .bg-grid-pattern {
      background-image: 
        linear-gradient(to right, hsl(var(--border)) 1px, transparent 1px),
        linear-gradient(to bottom, hsl(var(--border)) 1px, transparent 1px);
      background-size: 40px 40px;
    }
  `;
  document.head.appendChild(style);
}
